<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <!-- <a-col :md="6" :sm="8">
            <a-form-item label="档案号">
              <j-input placeholder="请输入档案号" v-model="queryParam.fileNumber"></j-input>
            </a-form-item>
          </a-col>-->
          <a-col :md="6" :sm="8">
            <a-form-item label="订单号">
              <j-input placeholder="请输入订单号" v-model="queryParam.orderNumber"></j-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="订单日期">
              <a-date-picker placeholder="订单日期" v-model="queryParam.orderDate" style="width: 100%"></a-date-picker>
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <!-- <a-col :md="6" :sm="8">
              <a-form-item label="订/定金金额">
                <a-input placeholder="订/定金金额" v-model="queryParam.epositAmount"></a-input>
              </a-form-item>
            </a-col>-->
            <a-col :md="6" :sm="8">
              <a-form-item label="销售顾问名称">
                <j-input placeholder="销售顾问名称" v-model="queryParam.salesName"></j-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-item label="销售顾问手机号码">
                <j-input placeholder="销售顾问手机号码" v-model="queryParam.salesPhone"></j-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-item label="订车人姓名">
                <j-input placeholder="订车人姓名" v-model="queryParam.ownerName"></j-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-item label="订车人手机号码">
                <j-input placeholder="订车人手机号码" v-model="queryParam.ownerPhone"></j-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-item label="企业名称">
                <j-input placeholder="企业名称" v-model="queryParam.enterpriseName"></j-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-item label="状态">
                <a-select v-model="queryParam.orderConfirmStatus" placeholder="请选择订单状态">
                  <a-select-option value="0">待确认</a-select-option>
                  <a-select-option value="1">未确认</a-select-option>
                  <a-select-option value="2">已确认</a-select-option>
                  <a-select-option value="3">异议</a-select-option>
                  <a-select-option value="4">异议待确认</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </template>
          <a-col :md="6" :sm="8">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button
                type="primary"
                @click="searchReset"
                icon="reload"
                style="margin-left: 8px"
              >重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <a-button type="primary" @click="showNewOrder()"><a-icon type="plus" />新增订单信息</a-button>

    <!-- 操作按钮区域 -->
    <div class="table-operator">

<!--      <a-dropdown v-if="selectedRowKeys.length > 0">-->
<!--        <a-menu slot="overlay">-->
<!--          <a-menu-item key="1" @click="batchDel">-->
<!--            <a-icon type="delete"/>-->
<!--            删除-->
<!--          </a-menu-item>-->
<!--        </a-menu>-->
<!--        <a-button style="margin-left: 8px">-->
<!--          批量操作-->
<!--          <a-icon type="down"/>-->
<!--        </a-button>-->
<!--      </a-dropdown>-->
    </div>

    <!-- table区域-begin -->
    <div>

      <a-table
        ref="table"
        size="middle"
        bordered
        :rowKey="(record,index)=> index"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
        :scroll="{ x: 1250 }"
      >
        <span slot="action" slot-scope="text, record">
          <a-button type="primary" @click="showModal(record)">查看详情</a-button>

          <!--          <a-button @click="showModal(record)">作废</a-button>-->
<!--          <a-modal v-model="visible2" title="作废提示" @ok="getInfo(recordInfo)">-->
<!--            <p>是否对该条记录进行作废？作废后将无法恢复！</p>-->
<!--          </a-modal>-->
        </span>
        <span slot="confirmStatus" slot-scope="text, record">
          <a-tag color="#A5ABBD" v-if="record.orderConfirmStatus == 0">待确认</a-tag>
          <a-tag v-if="record.orderConfirmStatus == 1">未确认</a-tag>
          <a-tag color="#2DC194" v-if="record.orderConfirmStatus == 2">已确认</a-tag>
          <a-tag color="#EEE8A9" v-if="record.orderConfirmStatus == 3">异议</a-tag>
          <a-tag color="#FFBA0C" v-if="record.orderConfirmStatus == 4">异议待确认</a-tag>
        </span>
        <span slot="filternetsign" slot-scope="text, record">
          <a-tag color="blue" v-if="record.links == 0">订单</a-tag>
          <a-tag color="pink" v-if="record.links == 1">合同</a-tag>
          <a-tag color="green" v-if="record.links == 2">交付</a-tag>
        </span>
        <span slot="time" slot-scope="orderDate">{{ orderDate | filterTime(orderDate) }}</span>
        <!--<span-->
        <!--  slot="filternetsign"-->
        <!--  slot-scope="links"-->
        <!--&gt;{{ links | filternetsign(links) }}</span>-->
      </a-table>
      <order-detail-modal ref="orderDetailModal"  @ok="modalFormOk"></order-detail-modal>
      <new-order-modal ref="modalForm"  @ok="modalFormOk"></new-order-modal>
    </div>
    <!-- table区域-end -->
  </a-card>

</template>


<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JInput from '@comp/jeecg/JInput'
import moment from 'moment'
import { USER_INFO } from '@/store/mutation-types'
import Vue from 'vue'
import { getAction, httpAction } from '@api/manage'
import orderDetailModal from '../NetSignModal/orderDetailModal'
import NewOrderModal from '../NetSignModal/NewOrderModal'

export default {
  name: 'NetSignIndex',
  mixins: [JeecgListMixin],
  components: {
    JInput,
    moment,
    orderDetailModal,
    NewOrderModal
  },
  data() {
    return {
      loading: '',
      columns: [
        {
          title: '档案号',
          align: 'center',
          dataIndex: 'fileNumber',
        },
        {
          title: '订单号',
          align: 'center',
          dataIndex: 'orderNumber',
        },
        {
          title: '客户姓名',
          align: 'center',
          dataIndex: 'ownerName',
        },
        {
          title: '客户电话',
          align: 'center',
          dataIndex: 'ownerPhone',
        },
        {
          title: '网签环节',
          align: 'center',
          dataIndex: 'links',
          scopedSlots: {
            customRender: 'filternetsign',
          },
        },

        // {
        //   title: '订单日期',
        //   align: 'center',
        //   dataIndex: 'orderDate',
        //   scopedSlots: {
        //     customRender: 'time',
        //   },
        // },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'orderConfirmStatus',
          scopedSlots: {
            customRender: 'confirmStatus',
          },
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: {
            customRender: 'action',
          },
        },
      ],
      url: {
        list: '/cxm/allCxmOrder/queryList',
        // delete: '/cxm/cxmOrderManager/delete',
        // deleteBatch: '/cxm/cxmOrderManager/deleteBatch',
        // exportXlsUrl: 'cxm/cxmOrderManager/exportXls',
        // importExcelUrl: 'cxm/cxmOrderManager/importExcel',
      },

    }
  },
  methods: {
    showModal(record) {
      this.$refs.orderDetailModal.edit(record)
      // this.visible2 = true
      // this.recordInfo = record
    },
    showNewOrder() {
      this.$refs.modalForm.add()
    },

  },
  filters: {
    filterTime(time) {
      return moment(time).format('YYYY-MM-DD')
    },
  },

}
</script>

<style scoped>

</style>
